
<template>
  <div class="post-content">
     <van-field
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
      >
      </van-field>
      <van-button size="mini" class="btn" @click="onPost" :disabled="!message">发布</van-button>
  </div>
</template>

<script>
import {addComment} from '@/api/comment'
export default {
  props:{
     //如果是发布文章评论 传递文章id
     //如果是发布评论回复 则传递评论id
     commentId:{
       type:[String,Number,Object],
       required:true
     },
     // 如果是发布评论回复，则也需要传递文章id
     artId:{
       type:[String,Number,Object],
       default:null
     }
  },
   data(){
     return {
       message:''
     }
   },
   methods:{
     async onPost(){
       this.$toast.loading({
         mesage:'发布中',
         forbidClick:true
       })
        const {data} = await addComment({
           target:this.commentId.toString(),//评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
           content:this.message,
           art_id:this.artId ? this.artId.toString() : null //文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
        })
        console.log(data)
        this.$emit('post-success',data.data.new_obj)
        this.$toast.success('发布成功')
        //清空输入框类型
        this.message=""
     }
   }
}
</script>

<style lang="less" scoped>
.post-content{
   display: flex;
   align-items: center;
   .btn{
        width: 80px;
   }
}

</style>
